<template>
  <!-- 调整发货数量-->
  <a-modal :width="1200" v-model:visible="showUpdateNum" title="调整发货数量" title-align="start" :mask-closable="false" :ok-loading="submitLoading" @cancel="closedDialog" :on-before-ok="submitData">
    <a-table class="table-two-line" ref="tableRef" :bordered="false" :data="[currentData]" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="img" title="图片" :width="60">
          <template #cell="{ record }">
            <ImgPopover :src="record.productImg">
              <template #con>
                <a-image width="40" height="40" fit="contain" :src="record.productImg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="MSKU/ASIN" :width="120">
          <template #cell="{ record }">
            <TextLimit :rows="1">{{ record.msku }}</TextLimit>
            <TextLimit :rows="1">{{ record.asin }}</TextLimit>
          </template>
        </a-table-column>
        <a-table-column data-index="fnsku" title="FNSKU" :width="100" />
        <a-table-column data-index="sku" title="SKU" :width="100" />
        <a-table-column data-index="packageName" title="包装" :width="100" />
        <a-table-column data-index="warehouseName" title="发货仓" :width="100" />
        <a-table-column data-index="realNum" title="发货数量" :width="70" />
        <a-table-column data-index="realNum" title="店铺专享库存数" :width="90">
          <template #cell="{ record }">
            <p>{{ showInventory(record, 'shopInventoryAmt') }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="productInventory" title="共享库存数" :width="90">
          <template #cell="{ record }">
            <p>{{ showInventory(record, 'shareInventoryAmt') }}</p>
          </template>
        </a-table-column>
        <a-table-column title="包装数" :width="70">
          <template #cell="{ record }">
            <p>{{ record.realNum }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="packageInventory" title="包装库存" :width="70">
          <template #cell="{ record }">
            <p>{{ showInventory(record, 'packageInventoryAmt') }}</p>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <p class="title" style="margin-top: 20px">调整发货数量{{ '<=' }}原发货数+店铺专享库存数+共享库存数。调整发货数量同时会调整包装数量</p>
    <a-input-number v-model="num" style="width: 200px; margin-top: 5px" placeholder="请输入调整数量" :min="0" />
    <p v-if="num > maxNum" class="warningColor" style="margin-top: 5px">发货数量不能大于可用库存</p>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { unlockFbaShipment, updateFbaShipmentByStore, findShipmentSkuDetailInventory } from '@/api/purchase'

  onMounted(() => {
    getSkuDetailInventory()
  })

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    fbaDetail: {
      type: Object,
      default: () => {},
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  })

  const showUpdateNum = ref(props.isShow)
  const num = ref()
  const submitLoading = ref(false)
  const currentData = props.fbaDetail.skuDetails[props.currentIndex] || {}
  const maxNum = computed(() => Number(currentData.realNum || 0) + Number(showInventory(currentData, 'shopInventoryAmt') || 0) + Number(showInventory(currentData, 'shareInventoryAmt') || 0))
  const inventoryMap = ref<any>({})

  // 获取明细库存
  async function getSkuDetailInventory() {
    const res: any = await findShipmentSkuDetailInventory({
      id: props.fbaDetail.id,
      skuDetails: [
        {
          msku: currentData.msku,
          sku: currentData.sku,
        },
      ],
    })
    let list = res?.data || []
    inventoryMap.value = {}
    list.forEach((el: any) => {
      let key = el.msku + el.sku
      inventoryMap.value[key] = el
    })
  }
  // 显示库存
  function showInventory(row: any, key: string) {
    let dataKey = row.msku + row.sku
    return inventoryMap.value[dataKey]?.[key]
  }
  async function submitData() {
    if (!num.value) {
      Message.error('请输入发货数量')
      return false
    }
    if (num.value > maxNum.value) return false
    // 先解锁再保存
    const res: any = await unlockFbaShipment({ id: props.fbaDetail.id })
    if (!res) return
    const _skuDetails = JSON.parse(JSON.stringify(props.fbaDetail.skuDetails))
    let skuDetails = _skuDetails.map((el: any, index: number) => {
      if (index === props.currentIndex) {
        el.realNum = num.value
      }
      return el
    })
    const saveRes: any = await updateFbaShipmentByStore({
      id: props.fbaDetail.id,
      skuDetails: skuDetails,
    })

    if (!saveRes) return false
    Message.success('修改成功')
    emit('success')
    emit('closed')
  }
  // 关闭
  function closedDialog() {
    showUpdateNum.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped></style>
